<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.7.2.js"></script>
    <script>
        $(function(){
            let flag = false;
            let pwdFlag = false;
            let user={};
            $("#username").blur(function () {
                let username = $("#username").val();
                //get方式请求参数应放置到url后
                $.get("/user/check?username="+username,function (r) {
                    console.log(r)
                    $("#errorMsg").html(r.msg)
                    if(r.ok){
                        $("#errorMsg").css("color","green")
                        flag = true;
                    }else{
                        $("#errorMsg").css("color","red")
                        flag = false;
                    }
                },"JSON")
            });
            $("#repwd").blur(function () {
                let pwd1 = $("#pwd").val();
                let pwd2 = $("#repwd").val();
                console.log(typeof pwd1)
                console.log(typeof pwd2)
                console.log( pwd1)
                console.log( pwd2)
                if (pwd1!='' && pwd2!=''){
                    if(pwd1===pwd2){
                        $("#pwdErrorMsg").html("")
                        pwdFlag = true;
                    }else{
                        $("#pwdErrorMsg").html('两次输入密码不一致')
                        $("#pwdErrorMsg").css("color","red")
                        pwdFlag = false;
                    }
                }
            });
            $("#reg").click(function () {
                if(!(flag==true&&flag==true)){
                    return;
                }
                let user={};
                user.username = $("#username").val();
                user.password = $("#pwd").val();
                user.gender = $('input[name="gender"]').filter(':checked').val();
                $.ajax({
                    type:"POST",
                    url:"/user/register",
                    data: JSON.stringify(user),
                    contentType:"application/json",
                    success: function(r){
                        alert(r.msg)
                        if(r.ok){
                            window.location = "/login.html"
                        }
                    }
                });
            })
        });
    </script>
    <style type="text/css">
        form
        {
            width:100%;
            height:100%;
            margin-top: 100px;
            margin-bottom: 100px;
            background:#008B8B;
        }
        div
        {
            display:inline-block;
            padding-top: 255px;
            padding-bottom: 255px;
            padding-left: 1px;
            padding-right: 1px;
        }
        h2
        {
            font-family: "微软雅黑";
            font-size: 40px;
            color:black;
        }
        #log
        {
            color:blue;
        }
    </style>
</head>
<body>
<form>
    <center>
        <div>
            <h3>
                注册
            </h3>
            <p>
                用户名：<input type="text" id="username" name="username"/>
            </p>
            <p>
                密&emsp;码：<input type="password" id="pwd" name="password"/>
            </p>
            <p>
                确认密码：<input type="password" id="repwd"/>
            </p>
            <p>
               性别： 男<input type="radio" name="gander" value="男">
                <!-- name：形成参数列表，name值设置成一样时，实现单选；name和value是标配，一般情况下默认都加上 -->
                女<input type="radio" name="gander" value="女"><br>
            </p>
            <p>
                <button id="reg">注册</button>
            </p>

        </div>
    </center>
</form>
</body>
</html>
